<template>
	<view class="page">

		<custom-navigation title="云喇叭管理" rightImg="/static/add.png"
			@rightAction="$navigateTo('/pages/device/loudspeaker/ludspeaker-add')">
		</custom-navigation>



		<scroll-view class="body-scroll" scroll-y="true">
			<view class="item-view flex-row-center" v-for="(item,index) in datas" @click="itemOnClick(item)">
				<view class="flex-column" style="flex: 1;">
					<view class="name">{{item.device_name}}</view>
					<view class="name1">设置编号、音量</view>
					<view class="default flex-row-center" >
						<image  @click.stop="setttingDefalut(item)" class="image" :src="item.whether_defult=='是'?'/static/check4.png':'/static/uncheck.png'">
						</image>
						<view @click.stop="setttingDefalut(item)">{{item.whether_defult=='是'?'默认设备':'设为默认'}}</view>
					</view>
				</view>
				<image src="/static//arrow_black.png"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				tabindex: 0,
				tabtitle: ["全部", "未提交", "已提交"],
				datas: [],
				page: 1,
				searchStr: '',
				counts: [0, 0, 0],
				start_time: '',
				end_time: '',
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: ''
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			if (uni.getStorageSync("refresh")) {
				uni.setStorageSync("refresh", null)
				this.page = 1;
				this.getData(this.tabindex)

			}
		},
		methods: {

			setttingDefalut(item) {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/operate/srvdev_device_loudspeaker_defult_update", [{
					"serviceName": "srvdev_device_loudspeaker_defult_update",
					"data": [{
						"whether_defult": "是"
					}],
					"condition": [{
						"colName": "id",
						"ruleType": "eq",
						"value": item.id
					}]
				}]).then(res => {
					this.page = 1;
					this.getData()
					uni.hideLoading()
					this.$showToast("设置成功！")
				})
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);

					this.start_time = e.value[0].replaceAll("/", "-")
					this.end_time = e.value[1].replaceAll("/", "-") + " 23:59"
					this.getData(this.tabindex)
				}
			},
			itemOnClick(item) {
				let info = JSON.stringify(item)
				uni.setStorageSync("loudspeaker_info", info)
				this.$navigateTo('/pages/device/loudspeaker/ludspeaker-add')
			},
			getData(index) {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvdev_device_loudspeaker_select", {
					"serviceName": "srvdev_device_loudspeaker_select",
					"colNames": [
						"*"
					],
					"page": {
						"pageNo": 1,
						"rownumber": 110
					}
				}).then(res => {
					this.datas = res.data;
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 39rpx;

		}

		input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 8rpx;
			color: #000;
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.item-view {
		padding: 24rpx 16rpx 24rpx 28rpx;
		width: 702rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);

		.name {
			font-size: 32rpx;
			font-weight: 500;
		}

		.name1 {
			margin-top: 8rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
		}

		.default {
			margin-top: 8rpx;
			font-weight: 500;
			font-size: 28rpx;

			.image {
				margin-top: 5rpx;
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}



		image {
			width: 28rpx;
			height: 28rpx;
		}

	}
</style>
